<template>
  <div class="chartName">
    <div class="tiao"></div>
    <div>{{ title }}</div>
  </div>
  <div class="main" ref="chart1" style="width: 100%; height: 100%"></div>
</template>
     
     
    <script setup>
// 先引入echarts
import * as echarts from "echarts";
// vue3 引入对应功能
import { onMounted, ref } from "vue";

defineProps({
  title: {
    type: String,
  },
});
// 声明chart1，使用ref赋值null
const chart1 = ref(null);

// 声明echarts函数
const chart = () => {
  // 解决echarts在vue中切换到其他页面再返回来就不显示的问题
  chart1.value.setAttribute("_echarts_instance_", "");
  // 这里使用chart1.value的形式获取到dom节点
  let myChart = echarts.init(chart1.value);

  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
     legend: {
    
    left: 'center'
  },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["1"],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        
        name: "药品品种使用量",
        type: "bar",
        barWidth: "5%",
        data: [{value: 1, name: '药品品种使用量'}],
      },
    ],
  });
  // echarts 自适应，如果dom元素是自适应高宽，会随之改变echarts大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
// 数据渲染完成后在这里挂载
onMounted(() => {
  chart();
});
</script>
     
    <style scoped>
.chartName {
  font-size: 20px;
  color: #1b1b1b;
  display: flex;
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 10px;
  padding-bottom: 10px;
}
.main {
  margin: auto;
  padding-bottom: 50px;
}
.tiao {
  width: 4px;
  height: 20px;
  margin-right: 9px;
  background-color: #945635;
  margin-top: 5px;
}
</style>